<template>
    <div id='system-risk-config'>
       <!--  <h1 class="card-title">
           <p><span>风控条件配置管理</span></p>
       </h1> -->
        <loading v-if='loading_risk_config'></loading>
        <div class='detail-info'v-if='!loading_risk_config'>
            <!-- 身份认证条件 -->
            <div class="card-content">
                <div class="sub-title">
                    <span class='title' style='co'>身份认证条件</span>
                </div>
                <p class='no-data' v-if='!riskConfigInfo.region'>暂无数据</p>

                <div class="risk-auth-id">
                    <div class='form-item small-bottom' v-if='riskConfigInfo.region'>
                        <span class="form-item__key">地域</span>
                        <div class="form-item__value full">
                            <ul class="tag-list" v-if='riskConfigInfo.region.province && riskConfigInfo.region.province.length'>
                                <li class="tag__item" v-for='item in riskConfigInfo.region.province'>{{item}}</li>
                            </ul>
                            <span class='tag__item' v-else>暂未配置</span>
                        </div>
                        <div class="deploy-button button" @click='showEditArea'>配置</div>
                    </div>
                    <div class='form-item small-bottom' v-if='riskConfigInfo.nation'>
                        <span class="form-item__key">民族</span>
                        <div class="form-item__value full">
                            <ul class="tag-list" v-if='riskConfigInfo.nation.nation && riskConfigInfo.nation.nation.length'>
                                <li class="tag__item" v-for='item in riskConfigInfo.nation.nation'>{{item}}</li>
                            </ul>
                            <span class='tag__item' v-else>暂未配置</span>
                        </div>
                        <div class="deploy-button button" @click='showEditNation'>配置</div>
                    </div>
                </div>
            </div>

            <!-- 机型、芝麻分、年龄配置 -->
            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>芝麻分、年龄配置</span>
                    <span @click='showAddDevice' class="button auto transparent tar">新增配置</span>
                </div>
                <p class='no-data' v-if='!riskConfigInfo.device.device'>暂无数据</p>
                <div class="table-list" v-if='riskConfigInfo.device'>
                    <p class='no-data' v-if='riskConfigInfo.device.device && !riskConfigInfo.device.device.length'>暂无数据</p>
                    <table v-if='riskConfigInfo.device.device && riskConfigInfo.device.device.length'>
                        <thead class="table-list__head">
                            <tr>
                                <!-- <th>设备类型</th> -->
                                <th>最低芝麻分</th>
                                <th>年龄段</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class='table-list__body have-border'>
                            <tr v-for='item in riskConfigInfo.device.device'>
                                <!-- <td>{{ item.device || placeholder }}111111</td> -->
                                <td>{{ item.zmScore || placeholder }}</td>
                                <td>{{ item.minAge || placeholder }} - {{ item.maxAge || placeholder }}</td>
                                <td>
                                    <div class='option-box'>
                                        <span class='option-button' @click='showEditDevice(item)'>编辑</span>
                                        <span class='option-button' @click='showDeleteDevice(item)'>删除</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>


            <!-- 运营商记录配置 -->
            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>运营商记录配置</span>
                    <span @click='showEditCarrier' class="button auto transparent tar">运营商记录配置</span>
                </div>
                <ul class="result-info__list" v-if='riskConfigInfo.carrier'>
                    <li class="result-info__item">
                        <div class="result-info__key">在网时长≥</div>
                        <div class="result-info__value">{{riskConfigInfo.carrier.onLineDay || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">活跃天数≥</div>
                        <div class="result-info__value">{{riskConfigInfo.carrier.activeDay || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">主叫≥</div>
                        <div class="result-info__value">{{riskConfigInfo.carrier.initiativeCallCount || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">被叫≥</div>
                        <div class="result-info__value">{{riskConfigInfo.carrier.passiveCallCount || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">联系号码数≥</div>
                        <div class="result-info__value">{{riskConfigInfo.carrier.contactNumber || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">诈骗电话互通≤</div>
                        <div class="result-info__value">{{riskConfigInfo.carrier.fraudCallCount || placeholder}}</div>
                    </li>
                </ul>
            </div>

            <!-- 运营商记录配置 -->
           <!--  <div class="card-content">
               <div class="sub-title">
                   <span class='title'>设备GPS定位风控范围</span>
                   <span @click='show_modal_gps = true' class="button auto transparent tar">设备GPS定位风控范围配置</span>
               </div>
               <ul class="result-info__list">
                   <li class="result-info__item">
                       <div class="result-info__key">设备GPS范围≤</div>
                       <div class="result-info__value">{{gpsInfo.deviceGPSDistanceRisk || placeholder}}米</div>
                   </li>
                   <li class="result-info__item">
                       <div class="result-info__key">设备GPS范围命中个数≤</div>
                       <div class="result-info__value">{{gpsInfo.deviceGPSNumberRisk || placeholder}}</div>
                   </li>
                   <li class="result-info__item">
                       <div class="result-info__key">身份证GPS范围≤</div>
                       <div class="result-info__value">{{gpsInfo.idCardGPSDistanceRisk || placeholder}}米</div>
                   </li>
                   <li class="result-info__item">
                       <div class="result-info__key">身份证GPS范围命中个数≤</div>
                       <div class="result-info__value">{{gpsInfo.idCardGPSNumberRisk || placeholder}}</div>
                   </li>
               </ul>
           </div> -->

            <!-- 自动分配时段 -->
            <!-- <div class="card-content">
                <div class="sub-title">
                    <span class='title'>自动分配时段</span>
                    <span @click='show_modal_time = true' class="button auto transparent tar">配置自动分配时段</span>
                </div>
            
                <div class="time" v-if='riskConfigInfo.time'>
                    <div class="time-item">
                        <span class='text'>开始</span>
                        <p class='big-number'>{{riskConfigInfo.time.startHour || placeholder}}</p>
                    </div>
                    <div class="time-item">
                        <span class='text'>结束</span>
                        <p class='big-number'>{{riskConfigInfo.time.stopHour || placeholder}}</p>
                    </div>
                </div>
            </div> -->
        </div>

        <modal 
            class='modal-auth'
            title='配置地域'
            :show='show_modal_area' 
            :loading='loading_save_area' 
            confirm-text='保存'
            @close='closeEditArea'
            @confirm='saveArea'>
            <div class="modal-form-wrap">
                <ul class='modal-form' v-if='provinces.length && riskConfigInfo.region'>
                    <li class='form-item'>
                        <span class="form-item__key">省份</span>
                        <div class="form-item__value" v-if='provinces.length'>
                            <area-select :max-height='260' @select='setArea' v-model='areaValue' :area='provinces' fixed></area-select>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置民族'
            :show='show_modal_nation' 
            :loading='loading_save_nation' 
            confirm-text='保存'
            @close='closeEditNation'
            @confirm='saveNation'>
            <div class="modal-form-wrap">
                <ul class='modal-form' v-if='nation.length'>
                    <li class='form-item'>
                        <span class="form-item__key">民族</span>
                        <div class="form-item__value" v-if='nation.length && riskConfigInfo.nation'>
                            <select-group 
                                v-model='nationValue'
                                placeholder='请选择民族（多选）' 
                                multiple 
                                key='nationValue'>
                                <select-option v-for='item in nation' :key='item.value' :value='item.value' :text='item.text'></select-option>
                            </select-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='机型、芝麻分、年龄配置'
            :show='show_modal_device' 
            :loading='loading_save_device' 
            confirm-text='保存'
            @close='show_modal_device=false'
            @confirm='saveDevice'>
            <div class="modal-form-wrap modal-limit">
                <ul class='modal-form'>
                    <!-- <li class='form-item'>
                        <span class="form-item__key">设备型号</span>
                        <div class="form-item__value" v-if='device.length'>
                            <select-group v-model='deviceSelect' fixed>
                                <select-option v-for='item in device' :key='item.text' :value='item.text' :text='item.text'></select-option>
                            </select-group>
                        </div>
                    </li> -->
                    <li class='form-item'>
                        <span class="form-item__key">最低芝麻分</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最低芝麻分" v-model='zmScore'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">最小年龄</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入年龄" v-model='minAge'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">最大年龄</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入年龄" v-model='maxAge'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置运营商记录'
            :show='show_modal_carrier' 
            :loading='loading_save_carrier' 
            confirm-text='保存'
            @close='show_modal_carrier = false'
            @confirm='saveCarrier'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">在网时长≥</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最低在网时长" v-model='carrierValueSet.onLineDay'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">活跃天数≥</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最低活跃天数" v-model='carrierValueSet.activeDay'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">主叫≥</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最低主叫次数" v-model='carrierValueSet.initiativeCallCount'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">被叫≥</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最低被叫次数" v-model='carrierValueSet.passiveCallCount'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">联系号码数≥</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最低联系号码数" v-model='carrierValueSet.contactNumber'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">诈骗电话互通≤</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最大诈骗电话互通数" v-model='carrierValueSet.fraudCallCount'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置设备GPS定位风控范围'
            :show='show_modal_gps' 
            :loading='loading_save_gps' 
            confirm-text='保存'
            @close='show_modal_gps = false'
            @confirm='saveGps'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">设备GPS范围≤</span>
                        <div class="form-item__value">
                            <p class="unit">米</p>
                            <input type="text" placeholder="请输入最低在网时长" v-model='setGpsInfo.deviceGPSDistanceRisk'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">设备GPS范围命中个数≤</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最低活跃天数" v-model='setGpsInfo.deviceGPSNumberRisk'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">身份证GPS范围≤</span>
                        <div class="form-item__value">
                            <p class="unit">米</p>
                            <input type="text" placeholder="请输入最低主叫次数" v-model='setGpsInfo.idCardGPSDistanceRisk'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">身份证GPS范围命中个数≤</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入最低被叫次数" v-model='setGpsInfo.idCardGPSNumberRisk'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置自动分配时段'
            :show='show_modal_time' 
            :loading='loading_save_time' 
            confirm-text='保存'
            @close='show_modal_time = false'
            @confirm='saveTime'>
            <div class="modal-form-wrap">
                <ul class="modal-form">
                    <li class='form-item'>
                        <span class="form-item__key">开始</span>
                        <div class="form-item__value" v-if='riskConfigInfo.time'>
                            <picker-time key='startDate' picker-id='startDate' v-model='startTime' default-value></picker-time>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">结束</span>
                        <div class="form-item__value" v-if='riskConfigInfo.time'>
                            <picker-time key='endDate' picker-id='endDate' v-model='endTime' default-value></picker-time>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <confirm
            title='确认删除此条配置'
            :show='show_confirm_delete_device'
            :loading='loading_delete_device'
            @close='show_confirm_delete_device = false'
            @confirm='saveDevice'></confirm>
    </div>
</template>

<script>    
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import pickerTime from '../components/PickerTime.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import checkBox from '../components/CheckBox.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { systemApi, allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            radioGroup,
            radio,
            pickerTime,
            areaSelect,
            selectGroup,
            selectOption,
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            checkBox,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                startTime:'',
                endTime:'',
                gpsInfo:{},
                setGpsInfo:{},
                show_modal_time:false,
                show_modal_area:false,
                show_modal_gps:false,
                show_modal_nation:false,
                show_modal_device:false,
                show_modal_carrier:false,
                show_confirm_delete_device:false,
                configInfo:{},
                riskConfigInfo:{},
                areaValue:[],
                areaValueSet:[],
                area:[],
                action:'',
                carrierValue:{},
                carrierValueSet:{},
                device:[],
                deviceList:[],
                deviceSelect:{
                    text:'请选择设备型号',
                    value:''
                },
                curItem:{},
                nationValue:[],
                nationValueSet:[],
                placeholder:'--',
                zmScore:'',
                minAge:'',
                maxAge:'',
                subConfigId:'',
                loading_device:false,
                loading_gps:false,
                loading_save_time:false,
                loading_save_gps:false,
                loading_save_carrier:false,
                loading_delete_device:false,
                loading_risk_config:false,
                loading_save_area:false,
                loading_save_nation:false,
                loading_save_device:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            nationArr(){
                let arr = []
                if(this.nationValue.length){
                    _.each(this.nationValue,(value,index)=>{
                        arr.push(value.text)
                    })
                }
                return arr
            },
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            provinces(){
                if(_.isEmpty(this.configInfo)) return []
                let arr = _.groupBy(this.configInfo.province,'firstLetter')
                let newArr = []
                _.each(arr,(value,index)=>{
                    newArr.push({
                        letter:index,
                        info:value
                    })
                })
                newArr = _.sortBy(newArr,'letter')
                return newArr
            },
            nation(){
                if(_.isEmpty(this.configInfo)) return []
                let arr = []
                _.each(this.configInfo.nation,(value)=>{
                    arr.push({
                        value:value,
                        text:value
                    })
                })
                return arr
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            setArea(select){
                this.area.push(select)
            },
            showEditArea(){
                this.show_modal_area = true
                this.areaValueSet = _.cloneDeep(this.areaValue)
            },
            showEditCarrier(){
                this.show_modal_carrier = true
            },
            showEditNation(){
                this.show_modal_nation = true
                this.nationValueSet = _.cloneDeep(this.nationValue)
            },
            closeEditArea(){
                this.show_modal_area = false
                this.areaValue = _.cloneDeep(this.areaValueSet)
            },
            closeEditNation(){
                this.show_modal_nation = false
                this.nationValue = _.cloneDeep(this.nationValueSet)
            },
            saveArea(){
                this.loading_save_area = true
                systemApi.setRiskConfig({
                    config:JSON.stringify({province:this.areaValue}),
                    type:'region'
                })
                .then(result=>{
                    this.show_modal_area = false
                    this.loading_save_area = false
                    this.getRiskConfig()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_area = false
                })
            },
            saveNation(){
                this.loading_save_nation = true
                systemApi.setRiskConfig({
                    config:JSON.stringify({nation:this.nationArr}),
                    type:'nation'
                })
                .then(result=>{
                    this.show_modal_nation = false
                    this.loading_save_nation = false
                    this.getRiskConfig()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_nation = false
                })
            },
            saveDevice(){
                /*if(this.deviceSelect.value == '' && this.action != 'delete'){
                    this.setMsgTip({
                        text:'请选择设备型号',
                        type:'warn'
                    })
                    return
                }*/
                if(this.zmScore === ''){
                    this.setMsgTip({
                        text:'请输入最低芝麻分',
                        type:'warn'
                    })
                    return
                }
                if(this.minAge === ''){
                    this.setMsgTip({
                        text:'请输入最小年龄',
                        type:'warn'
                    })
                    return
                }
                if(this.maxAge === ''){
                    this.setMsgTip({
                        text:'请输入最大年龄',
                        type:'warn'
                    })
                    return
                }
                this.loading_save_device = true
                let params
                if(this.action == 'delete'){
                    params = this.curItem
                }
                else{
                    params = {
                        //device:this.deviceSelect.value,
                        subConfigId:this.subConfigId,
                        zmScore:this.zmScore,
                        minAge:this.minAge,
                        maxAge:this.maxAge
                    }
                }
                systemApi.setRiskConfig({
                    config:JSON.stringify(params),
                    type:'device',
                    action:this.action
                })
                .then(result=>{
                    this.show_modal_device = false
                    this.show_confirm_delete_device = false
                    this.loading_save_device = false
                    this.getRiskConfig()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_device = false
                })
            },
            saveCarrier(){
                this.loading_save_carrier = true
                systemApi.setRiskConfig({
                    config:JSON.stringify({
                        onLineDay:this.carrierValueSet.onLineDay,
                        activeDay:this.carrierValueSet.activeDay,
                        initiativeCallCount:this.carrierValueSet.initiativeCallCount,
                        passiveCallCount:this.carrierValueSet.passiveCallCount,
                        contactNumber:this.carrierValueSet.contactNumber,
                        fraudCallCount:this.carrierValueSet.fraudCallCount
                    }),
                    type:'carrier',
                })
                .then(result=>{
                    this.show_modal_carrier = false
                    this.loading_save_carrier = false
                    this.getRiskConfig()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_carrier = false
                })
            },
            saveTime(){
                this.loading_save_time = true
                systemApi.setRiskConfig({
                    config:JSON.stringify({
                        startHour:this.startTime,
                        stopHour:this.endTime
                    }),
                    type:'time',
                })
                .then(result=>{
                    this.show_modal_time = false
                    this.loading_save_time = false
                    this.getRiskConfig()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_time = false
                })
            },
            saveGps(){
                this.loading_save_gps = true
                systemApi.saveGPSRisk(this.setGpsInfo)
                .then(result=>{
                    this.show_modal_gps = false
                    this.loading_save_gps = false
                    this.getGPSRisk()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_gps = false
                })
            },
            showEditDevice(item){
                this.zmScore = item.zmScore
                this.minAge = item.minAge
                this.maxAge = item.maxAge
                this.deviceSelect = {
                    text:item.device,
                    value:item.device
                }
                this.subConfigId = item.subConfigId
                this.action = 'update'
                this.show_modal_device = true
            },
            showAddDevice(){
                this.zmScore = ''
                this.minAge = ''
                this.maxAge = ''
                this.subConfigId = ''
                this.deviceSelect = {
                    text:'请选择设备型号',
                    value:''
                }
                this.action = 'add'
                this.show_modal_device = true
            },
            showDeleteDevice(item){
                this.action = 'delete'
                this.curItem = item
                this.show_confirm_delete_device = true
            },
            getModels(){
                this.loading_models = true
                systemApi.allModels()
                .then(result=>{
                    this.models = result
                    this.modelsSet = _.clone(result)
                    this.loading_models = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_models = false
                })
            },
            getCycles(){
                this.loading_cycles = true
                systemApi.allCycles()
                .then(result=>{
                    this.cycles = result
                    this.cyclesSet = _.clone(result)
                    this.loading_cycles = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_cycles = false
                })
            },
            getConfigInfo(){
                systemApi.getConfigInfo()
                .then(result=>{
                    this.configInfo = result
                    _.each(result.device,(value,index)=>{
                        this.device.push({
                            text:value,
                            value:value
                        })
                    })
                })
                .catch(error=>{
                    console.error(error)
                })
            },
            getRiskConfig(){
                this.riskConfigInfo = {}
                this.loading_risk_config = true
                systemApi.getRiskConfig()
                .then(result=>{
                    this.loading_risk_config = false
                    this.riskConfigInfo = result
                    this.areaValue = _.cloneDeep(result.region && result.region.province) || []
                    this.carrierValueSet = _.cloneDeep(result.carrier) || {}
                    this.deviceList = result.device.device
                    this.startTime = result.time && result.time.startHour
                    this.endTime = result.time && result.time.stopHour
                    if(result.nation && result.nation.nation){
                        this.nationValue = []
                        _.each(result.nation.nation,(value,index)=>{
                            this.nationValue.push({
                                text:value,
                                value:value
                            })
                        })
                    }
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_risk_config = false
                })
            },
            getGPSRisk(){
                this.loading_gps = true
                systemApi.showGPSRisk()
                .then(result=>{
                    this.loading_gps = false
                    this.gpsInfo = result
                    this.setGpsInfo = _.cloneDeep(result)
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_gps = false
                })
            }
        },
        created(){
            this.getConfigInfo()
            this.getRiskConfig()
            this.getGPSRisk()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #system-risk-config{
        .modal-auth{
            .component-modal__main{

            }
        }
        .time-item{
            display: flex;
            align-items: center;
            .text{
                @extend %font-body1;
                display: block;
                color:$importColor;
            }
            padding: 5px 0;
        }
        .big-number{
            font-size: 26px;
            color:$green;
            padding-left: 10px;
        }
        .risk-auth-id{
            .form-item__key{
                padding-bottom: 10px;
                @extend %font-body1;
                color:$importColor;
            }
        }
        .deploy-button{
            margin-bottom: 10px;
        }
        .modal-limit{

        }
    }
     body .sub-title .title{
        padding:16px 0;
    }
    body .sub-title{
        color:#333;
        font-size:16px;
        padding:0 20px;
    }
    .button{
        font-size:16px;
    }
     body .result-info__key{
        color:#333;
    }
</style>
